<template>
    <el-row>
        <el-col>
            <header class="head">协议转换</header>
            <el-form label-width="100px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="入参协议：">
                            {{ selectNode.data.inAgreement }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="目标协议：">
                            {{ selectNode.data.targetAgreement }}
                        </el-form-item>
                    </el-col>
                </el-row>
                <header class="head" style="margin: 0">参数转换</header>
                <el-form-item label="参数序列化：" v-show="isJsonToSoap">
                    <el-checkbox
                            v-model="formData.isParamSerialize"
                            :disabled="isView"
                    ></el-checkbox>
                </el-form-item>
                <!-- 入参名称 -->
                <el-form-item label="参数名称：" v-show="isJsonToSoap">
                    <el-input
                            v-model="formData.paramInSerializeName"
                            :disabled="isView"
                            type="text"
                            size="mini"
                    ></el-input>
                </el-form-item>
                <!-- 出参名称 -->
                <el-form-item label="参数名称：" v-show="isSoapToJson">
                    <el-input
                            v-model="formData.paramOutSerializeName"
                            :disabled="isView"
                            type="text"
                            size="mini"
                    ></el-input>
                </el-form-item>
                <el-form-item label="参数带属性：" v-show="isSoapToJson">
                    <el-checkbox
                            v-model="formData.outparamWithAttr"
                            :disabled="isView"
                    ></el-checkbox>
                </el-form-item>
                <el-form-item label="WSDL路径：" v-show="isJsonToSoap">
                    {{
                    (moreNodeInfo[formData.soapId] &&
                        moreNodeInfo[formData.soapId].apiUrl) ||
                    ""
                    }}
                </el-form-item>
                <el-form-item label="请求方法：">
                    {{
                    (moreNodeInfo[formData.soapId] &&
                        moreNodeInfo[formData.soapId].httpRequestMethod) ||
                    ""
                    }}
                </el-form-item>
            </el-form>

            <header class="head" style="margin: 0">参数转换</header>
            <el-table
                    :data="isJsonToSoap ? paramIn : paramOut"
                    border
                    max-height="300px"
            >
                <el-table-column
                        prop="nodeName"
                        label="原参数名"
                        :show-overflow-tooltip="true"
                ></el-table-column>
                <el-table-column
                        prop="nodeLabel"
                        label="参数描述"
                        :show-overflow-tooltip="true"
                ></el-table-column>
                <el-table-column
                        label="参数类型"
                        prop="nodeType"
                        :show-overflow-tooltip="true"
                >
                    <template #default="scope">
                        <span>{{ selectDictLabel(keyTypeList, scope.row.nodeType) }}</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="重命名" min-width="100">
                  <template #default="scope">
                    <el-input
                      v-model="scope.row.serviceNodeName"
                      size="mini"
                    />
                  </template>
                </el-table-column>
                <el-table-column label="是否隐藏" align="center" width="80">
                  <template #default="scope">
                    <el-checkbox
                      v-model="scope.row.hidden"
                    ></el-checkbox>
                  </template>
                </el-table-column> -->
            </el-table>
        </el-col>
    </el-row>
</template>

<script>
// import { mapState } from "vuex";
import {serviceStore} from '@slc/store/service';
import {flowServiceStore} from '@slc/store/flowService';
import {mapActions, mapState} from 'pinia';

export default {
    name: "custom-transform",
    computed: {
        ...mapState(serviceStore, [
            "keyTypeList",
            "dialogStatus",
            "dialogVersionStatus",
        ]),
        ...mapState(flowServiceStore, ["moreNodeInfo", "currentNodeId", "selectNode"]),
        formData: {
            get() {
                return this.moreNodeInfo[this.currentNodeId];
            },
            set(val) {
                this.setMoreNodeInfo({
                    ...this.moreNodeInfo,
                    [this.currentNodeId]: val,
                });
            },
        },
        isJsonToSoap() {
            return (
                this.selectNode.data &&
                this.selectNode.data.type === "processor-JsonToSoapXml"
            );
        },
        isSoapToJson() {
            return (
                this.selectNode.data &&
                this.selectNode.data.type === "processor-SoapXmlToJson"
            );
        },
        paramIn() {
            return (
                (this.moreNodeInfo[this.formData.soapId] &&
                    this.moreNodeInfo[this.formData.soapId].inParamList) ||
                []
            );
        },
        paramOut() {
            return (
                (this.moreNodeInfo[this.formData.soapId] &&
                    this.moreNodeInfo[this.formData.soapId].outParamList) ||
                []
            );
        },
        isView() {
            return (
                this.dialogStatus === "view" || this.dialogVersionStatus === "view"
            );
        },
    },
    methods: {
        ...mapActions(flowServiceStore, ["setMoreNodeInfo"]),
    }
};
</script>

<style lang="scss" scoped>
.head {
  height: 40px;
  text-align: center;
  line-height: 40px;
  color: #333;
  font-weight: bold;
  font-size: 14px;
  background-color: #ccc;
  // margin-bottom: 16px;
}

:deep(.el-form-item) {
  margin-bottom: 0px;
}
</style>
